<%--
  Created by IntelliJ IDEA.
  User: ShenMouMou
  Date: 2024/8/22
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<html>
    <head>
        <title>Title</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <select name="provinces" @change="findCity(provinceid)" v-model="provinceid">
                <option value="-1">--请选择省份--</option>
                <option :value="ele.provinceid" v-for="(ele,index) in provincesArr" :key="index">{{ele.province}}
                </option>
            </select>
            <select name="city" @change="findArea(cityid)" v-model="cityid">
                <option value="-1">--请选择城市--</option>
                <option :value="ele.cityid" v-for="(ele,index) in cityArr" :key="index">{{ele.city}}
                </option>
            </select>
            <select name="area" v-model="areaid">
                <option value="-1">--请选择区域--</option>
                <option :value="ele.areaid" v-for="(ele,index) in areaArr" :key="index">{{ele.area}}
                </option>
            </select>
        </div>
    </body>
</html>
<script>
    Vue.createApp({
        data: function () {
            return {
                provincesArr: [],
                provinceid: '-1',
                cityArr: [],
                cityid: '-1',
                areaArr: [],
                areaid: '-1',
            }
        },
        methods: {
            //查询城市
            findCity(id) {
                this.cityid = "-1";
                this.areaid = "-1";
                console.log("切换省份了" + id);
                var that = this;
                axios.get("/myweb/city?provinceid=" + id).then(function (responseData) {
                    //console.log(responseData);
                    console.log(responseData.data); //获取后台返回的JSON数据
                    that.cityArr = responseData.data;
                }).catch(function (err) {
                    //请求失败的处理
                    console.log(err);
                })
            },
            //查询区域
            findArea(id) {

                console.log("切换城市了" + id);
                var that = this;
                axios.get("/myweb/area?cityid=" + id).then(function (responseData) {
                    //console.log(responseData);
                    console.log(responseData.data); //获取后台返回的JSON数据
                    that.areaArr = responseData.data;
                }).catch(function (err) {
                    //请求失败的处理
                    console.log(err);
                })
            }
        },
        //生命周期函数
        mounted: function () {
            var that = this;
            axios.get("/myweb/province", {
                params: {}
            }).then(function (responseData) {
                //console.log(responseData);
                console.log(responseData.data); //获取后台返回的JSON数据
                that.provincesArr = responseData.data;
            }).catch(function (err) {
                //请求失败的处理
                console.log(err);
            })
        }
    }).mount('#app');
</script>
